<template>
  <div class="login">
    <div class="main-title">
      <div class="back" @click="routerBack()">
        <i class="van-icon van-icon-plus"></i>
      </div>
      Sign In
    </div>
    <div class="login-body">
      <van-image width="100%" :src="registerInfo" />
    </div>
    <div class="login-form">
      <van-form>
        <van-cell-group>
          <div class="login-form-tips">
            Enter your phone number and password to access your account
          </div>
          <div class="login-form-item">
            <van-field
              v-model="phone"
              label-width="3em"
              label="    "
              placeholder="Phone Number"
            />
          </div>
          <div class="login-form-item">
            <van-field
              type="password"
              v-model="passowrd"
              placeholder="Password"
            />
          </div>
          <div class="login-form-item-tips">
            Forgote Password
          </div>
        </van-cell-group>
        <div class="login-form-btn">
          <van-button round block type="primary" @click="signIn" class="btn btn-orange">Sign In</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import RegisterInfo from '../assets/img/signup-guide-04.png'

const router = useRouter()
const registerInfo = RegisterInfo
const phone = ref('')
const passowrd = ref('')

const routerBack = (() => {
  history.back()
})

const signIn = (() => {
  router.push({
    name: 'Shop'
  })
})
</script>
<style scoped>
.login {
  display: block;
}
.login-body {
  padding: 0 5vw;
}
.login-form {
  padding: 10px 5vw 0;
}
.login-form-item {
  position: relative;
  display: block;
  margin-bottom: 10px;
}
.login-form-item input {
  color: #AC8E71;
}
.login-form-item-tips {
  text-align: right;
  color:#FF5E00;
  font-size: 0.8em;
  padding-right: 2vw;
  line-height: 30px;
  padding-bottom: 20px;
}
.login-form-tips {
  font-size: 1em;
  line-height: 20px;
  padding: 3px 0;
  color: #7F4E1D;
}
.login-form-tips span {
  color: #FF5E00;
}
.login-form-item ::-webkit-input-placeholder {
  color: #AC8E71;
}
.login-form-btn .btn{
  width: 100%;
  border: #FF5E00 1px solid;
  background: #FF5E00;
  color: #FFF;
  font-size: 1em;
  font-weight: bold;
  margin: 10px 0;
}
.van-field {
  border-radius: 5px;
  background: #F3F3F3;
}
.van-field .van-field__value {
  color:#AC8E71;
}
.van-field .van-field__value .van-field__body .van-field__control{
  color:#AC8E71;
}
:root {
  --van-text-color: #AC8E71 !important;
}
</style>
